<!--
 * @Description: 
 * @Author: lz
 * @Date: 2022-12-22 21:57:53
 * @LastEditTime: 2022-12-30 21:37:06
 * @LastEditors: lz
-->

<template>
  <div class="process-container">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="form.projectName" placeholder="项目名称" @keyup.enter.native="getData()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData()">搜索</el-button>
      </el-form-item>
    </el-form>
    <section>
      <div class="list-wrap">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="item-no">项目编号 {{ item.projectCode }}</div>
          <el-tooltip class="item" effect="dark" :content="item.projectName" placement="bottom">
            <div class="item-title">{{ item.projectName }}</div>
          </el-tooltip>
          <div class="item-desc">{{ item.projectNature }}</div>
          <div class="item-price">总投资：{{ item.totalAmount }}万元</div>
          <el-button class="item-btn" type="primary" @click="toConfig(item.id)">流程配置</el-button>
        </div>
      </div>
      <el-pagination
        v-if="paginationConfig.total > 0"
        class="pagination"
        :total="paginationConfig.total"
        :current-page="paginationConfig.pageNo"
        :page-size="paginationConfig.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="changeCurrentPage"
        @size-change="changeSizePage"
      />
    </section>
  </div>
</template>
<script>
import { getOnlinePage } from "@/api/processApi.js";
export default {
  data () {
    return {
      form: {
        projectName: ""
      },
      list: [],
      paginationConfig: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created () {
    this.getData();
  },
  methods: {
    getData () {
      getOnlinePage({
        projectName: this.form.projectName.trim(),
        pageNo: this.paginationConfig.pageNo,
        pageSize: this.paginationConfig.pageSize,
        windowId: JSON.parse(localStorage.getItem('P-User-Info')).id - 0
      }).then(res => {
        this.paginationConfig.total = res.data.total;
        this.list = res.data.records;
      });
    },
    changeCurrentPage (pageNum) {
      this.paginationConfig.pageNo = pageNum;
      this.getData();
    },
    changeSizePage (pageSize) {
      this.paginationConfig.pageSize = pageSize;
      this.getData();
    },
    toConfig (id) {
      this.$router.push("/configuration/process?stage=1&id=" + id);
    }
  }
};
</script>

<style lang="scss" scoped>
.list-wrap {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 15px;
  .list-item {
    position: relative;
    max-width: 560px;
    width: 45%;
    height: 192px;
    background: #ffffff;
    box-shadow: 0px 12px 116px 0px rgba(196, 203, 214, 0.1);
    border-radius: 48px;
    margin-bottom: 27px;
    padding: 31px 0 43px 36px;
    box-sizing: border-box;
    &:nth-child(2n + 1) {
      margin-right: 50px;
    }
    .item-no {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin-bottom: 14px;
    }
    .item-title {
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #0a1629;
      line-height: 35px;
      width: 280px;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-desc {
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
      margin-bottom: 17px;
    }
    .item-price {
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }
    .item-btn {
      position: absolute;
      right: 42px;
      top: 35px;
    }
  }
}
.pagination {
  text-align: right;
  padding-right: 30px;
}
@media (min-width: 1280px) {
  .list-wrap {
    .list-item {
      max-width: 498px;
      .item-title {
        font-size: 22px;
        width: 260px;
      }
      .item-btn {
        right: 37px;
        top: 31px;
        width: 100px;
        height: 36px;
        background: #408cff;
        border-radius: 9px;
        font-size: 18px;
        box-sizing: border-box;
        padding: 9px 13px;
      }
    }
  }
}
</style>
